<html>
 	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Gnis WFS</title>
        <style type="text/css">
        	#map {
            	width: 100%;
                height : 100%;
                border: 1px solid black;
                }
		</style>
		<script src="http://openlayers.org/api/OpenLayers.js"></script>
		<script>
			var map;
			var baseLayer;
			var editMode = false;
			var maxBounds;
			function init(){                         // 지도 생성 옵션                        
				maxBounds = new OpenLayers.Bounds(-180, -90, 180, 90);
			var options = {
					maxExtent : maxBounds,
					numZoomLevels : 20,
					maxResolution : "auto",
					controls : [],
					projection : "EPSG:4326",
					units : "degrees"
					};
			// 지도 레이어를 생성한다.                     
					map = new OpenLayers.Map('map', options);
					baseLayer = new OpenLayers.Layer.WMS('WFS Layer',
							"http://vmap0.tiles.osgeo.org/wms/vmap0?",
							{layers: 'basic'});
					baseLayer.setVisibility(true);
					map.addLayer(baseLayer);
					// 기본 지도영역에 컨트롤 추가
					map.addControl(new OpenLayers.Control.ScaleLine());
					map.addControl(new OpenLayers.Control.LayerSwitcher());
					map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon: true}));
					map.addControl(new OpenLayers.Control.MousePosition());
					controls = {
							navi: new OpenLayers.Control.Navigation(),
							point: new OpenLayers.Control.DrawFeature(baseLayer, OpenLayers.Handler.Point),
							line: new OpenLayers.Control.DrawFeature(baseLayer, OpenLayers.Handler.Path),
							polygon: new OpenLayers.Control.DrawFeature(baseLayer, OpenLayers.Handler.Polygon),
							regular: new OpenLayers.Control.DrawFeature(baseLayer,
									OpenLayers.Handler.RegularPolygon,
									{handlerOptions: {sides: 5}}),
									modify: new OpenLayers.Control.ModifyFeature(baseLayer),
									distance: new OpenLayers.Control.Measure(OpenLayers.Handler.Path, options),
									area: new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, options)
					};
					controls['point'].featureAdded = function(feature) {
						var oldgeom = feature.geometry;
						feature.layer.renderer.eraseGeometry(oldgeom);
						feature.geometry = new OpenLayers.Geometry.MultiPoint(oldgeom);
						feature.state = OpenLayers.State.INSERT;
						feature.layer.drawFeature(feature);
						}
					controls['line'].featureAdded = function(feature) {
						var oldgeom = feature.geometry;
						feature.layer.renderer.eraseGeometry(oldgeom);
						feature.geometry = new OpenLayers.Geometry.MultiLine(oldgeom);
						feature.state = OpenLayers.State.INSERT;
						feature.layer.drawFeature(feature);
						}
					controls['polygon'].featureAdded = function(feature) {
						var oldgeom = feature.geometry;
						feature.layer.renderer.eraseGeometry(oldgeom);
						feature.geometry = new OpenLayers.Geometry.MultiPolygon(oldgeom);
						feature.state = OpenLayers.State.INSERT;
						feature.layer.drawFeature(feature);
						}
					controls['regular'].featureAdded = function(feature) {
						var oldgeom = feature.geometry;
						feature.layer.renderer.eraseGeometry(oldgeom);
						feature.geometry = new OpenLayers.Geometry.MultiPolygon(oldgeom);
						feature.state = OpenLayers.State.INSERT;
						feature.layer.drawFeature(feature);
						}
					var measureControl;
					for(var key in controls) {
						if(key == "distance" || key == "area") {
							measureControl = controls[key];
							measureControl.events.on({
								"measure": handleMeasurements,
								"measurepartial": handleMeasurements
								});
							map.addControl(measureControl);
							} else {
								map.addControl(controls[key]);
								}
						}
					// Overview 컨트롤 지도 영역 옵션 설정
					var mapOptions = {
							layers: [baseLayer],
							maxResolution: 0.0028947981797207978
							};
					// 외부 Viewport용 Overview 컨트롤 옵션 설정
					var overviewOptions = {
							mapOptions: mapOptions,
							size:new OpenLayers.Size(200, 200)
					};
					overviewCtrl = new OpenLayers.Control.OverviewMap(overviewOptions);
					map.addControl(overviewCtrl);
					map.setCenter(maxBounds.getCenterLonLat(), 0);
					}
			function featureAdded(evt) {
				if (editMode) {
					evt.feature.state = OpenLayers.State.INSERT;
					setFeature(evt.feature);
					}
				}
			function featureSelected(evt) {
				setFeature(evt.feature);
				}
			function featureModified(evt) {
				if (editMode) {
					if (evt.feature.state == null) {
						evt.feature.state = OpenLayers.State.UPDATE;
						} else {
							evt.feature.toState(OpenLayers.State.UPDATE);
							}
					setFeature(evt.feature);
					}
				}
			function editReshape() {
				editMode = true;
				controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
				toggleControl('modify');
				}
			function editDrag() {
				editMode = true;
				controls.modify.mode = OpenLayers.Control.ModifyFeature.DRAG;
				toggleControl('modify');
				}
			function editResize() {
				editMode = true;
				controls.modify.mode = OpenLayers.Control.ModifyFeature.RESIZE;
				toggleControl('modify');
				}
			function editRotate() {
				editMode = true;
				controls.modify.mode = OpenLayers.Control.ModifyFeature.ROTATE;
				toggleControl('modify');
				}
			function editRemove() {
				for (var sf in baseLayer.selectedFeatures) {
					var feature = baseLayer.selectedFeatures[sf];
					if (feature.state == null) {
						feature.state = OpenLayers.State.DELETE;
						} else if (feature.state == OpenLayers.State.INSERT) {
							baseLayer.removeFeatures(feature);
							} else {
								feature.toState(OpenLayers.State.DELETE); 
								}
					if (feature.state == OpenLayers.State.DELETE) {
						var oldgeom = feature.geometry;
						feature.layer.renderer.eraseGeometry(oldgeom);
						feature.geometry = null;
						}
					setFeature(feature);
					}
				}
			function addPoint() {
				toggleControl('point');
				}
			function addLine() {
				toggleControl('line');
				}
			function addPolygon() {
				toggleControl('polygon');
				}
			function addRegular() {
				var sides = parseInt(document.getElementById("sides").value);
				sides = Math.max(3, isNaN(sides) ? 0 : sides);
				controls.regular.handler.sides = sides;
				var irregular =  document.getElementById("irregular").checked;
				controls.regular.handler.irregular = irregular;
				toggleControl('regular');
				}
			function toggleControl(element) {
				for(key in controls) {
					var control = controls[key];
					if(element == key) {
						control.activate();
						} else {
							control.deactivate();
							}
					}
				}
			function calcVincenty(geometry) {
				/**
				* Note: this function assumes geographic coordinates and
				*     will fail otherwise.  OpenLayers.Util.distVincenty takes
				*     two objects representing points with geographic coordinates
				*     and returns the geodesic distance between them (shortest
				*     distance between the two points on an ellipsoid) in *kilometers*.
				*
				* It is important to realize that the segments drawn on the map
				*     are *not* geodesics (or "great circle" segments).  This means
				*     that in general, the measure returned by this function
				*     will not represent the length of segments drawn on the map.
				*/
				var dist = 0;
			for (var i = 1; i < geometry.components.length; i++) {
				var first = geometry.components[i-1];
				var second = geometry.components[i];
				dist += OpenLayers.Util.distVincenty(
						{lon: first.x, lat: first.y},
						{lon: second.x, lat: second.y}
						);
				}
			return dist;
			}
			function handleMeasurements(event) {
				var geometry = event.geometry;
				var units = event.units;
				var order = event.order;
				var measure = event.measure;
				var element = document.getElementById('output');
				var out = "";
				if(order == 1) {
					out += "거리: " + measure.toFixed(3) + " " + units;
					if (map.getProjection() == "EPSG:4326") {
						out += "<br /> Great Circle Distance: " +
						calcVincenty(geometry).toFixed(3) + " km *";
						}
					} else {
						out += "면적: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
						}
				element.innerHTML = out;
				}
			function saveEdit() {
				baseLayer.commit();
				baseLayer.redraw();
				}
			function cancelEdit() {
				baseLayer.redraw();
				}
			function setFeature(feature) {
				var html = "";
				if (feature != null) {
					html += "Feature: " + feature.id;
					html += "<ul>";
					html += "<li>TypeName: " + feature.layer.typename + "</li>";
					html += "<li>State: " + feature.state + "</li>";
					html += "<li>Geometry: " + feature.geometry.CLASS_NAME + "</li>";
					for (var j in feature.attributes) {
						html += "<li>"+j+": "+feature.attributes[j]+"</li>";
						}
					html += "</ul>"
					}
				document.getElementById('output').innerHTML = html;
				}
			</script>
		</head>
		   <body onload="init()">
		      <table border="2" cellspacing="5" cellpadding="0"
		           style="border-color: #CCCCFF" width="100%" height="80%">
		                <tr>
				            <td height="20">
			                <table>
			                <tr>
			                <td> 
			                <a href="javascript:map.zoomIn()">확대</a>
			                <a href="javascript:map.zoomOut()">축소</a>
			                <a href="javascript:toggleControl('navi')">이동</a>
			                </td>
			                <td>
			                <a href="javascript:toggleControl('distance')">거리</a>
			                <a href="javascript:toggleControl('area')">면적</a>
			                </td>
			                <td>
			                </td>
			                <td>
			                <a href="javascript:addPoint()">점 추가</a>
			                <a href="javascript:addLine()">선 추가</a>
			                <a href="javascript:addPolygon()">면 추가</a>
			                <a href="javascript:addRegular()">다각형 추가</a>
			                <label for="sides"> - sides</label>
			                <input id="sides" type="text" size="2" maxlength="2"
			                       name="sides" value="5" onclick="addRegular()" />
			                <input id="irregular" type="checkbox"
			                       name="irregular" onclick="addRegular()" />
			                <label for="irregular">irregular</label>
			                </td>
			                <td>
			                <a href="javascript:editDrag()">선택/이동</a>
			                <a href="javascript:editReshape()">좌표편집</a>
			                <a href="javascript:editResize()">크기조정</a>
			                <a href="javascript:editRotate()">회전</a>
			                <a href="javascript:editRemove()">삭제</a>
			                </td>
			                <td>
			                <a href="javascript:saveEdit()">편집 저장</a>
			                <a href="javascript:cancelEdit()">편집 취소</a>
			                </td>
			                </tr>
			                </table>
			                </td>
			                </tr>
			                <tr>
			                <td>
			                <div id="map"></div>
			                </td>
			                </tr>
			                </table>
			                <h3>Gnis WFS</h3>
			                <b>Output:</b><br />
			                <div id="output"></div>
			                <b>Metadata:</b><br />
			                <table border="1" width="500">
			                <tr>
			                <td>
			                CRS
			                </td>
			                <td>
			                EPSG:4326
			                </td>
			                </tr>
			                <tr>
			                <td>
			                Unit of Measure
			                </td>
			                <td>
			                degrees
			                </td>
			                </tr>
			                <tr>
			                <td>
			                BBOX
			                </td>
			                <td>
			                126.72017421341096, 36.989626193328306, 127.64622560702703, 38.09258319519866
			                </td>
			                </tr>
			                </table>
			                <br />
			                <form name="f" method="GET">
			                <input type="hidden" name="INSTANCE" value="wfs" />
			                <input type="hidden" name="GDX" value="test.xml" />
			                <input type="hidden" name="TYPE_NAME" value="KOP_AP_SGG" />
			                <b>CRS:</b><input type="text" name="CRS" value="EPSG:4326" size="10" /><br />
			                <b>Max Extent:</b><input type="text" name="MAX_EXTENT" size="60" value="126.72017421341096, 36.989626193328306, 127.64622560702703, 38.09258319519866" /><br />
			                <b>Max Resolution:</b><input type="text" name="MAX_RESOLUTION" size="60" value="0.002154212894278029" /><br />
			                <b>Zoom Level:</b><input type="text" name="NUM_ZOOM_LEVEL" size="3" value="14" /><br />
			                <b>Max Features:</b><input type="text" name="MAX_FEATURES" value="1000"><br />
			                <input type="submit" value="Change Properties" />
			                <input type="reset" value="Reset" />
			                </form>
			                <a href="../index.jsp">Go to Server Status</a>
			                </body>
 </html> 